<template>
  <div class="container">
    <baidu-map class="box" center="济南" :scrollWheelZoom="true">
      <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
      <bm-label v-for="item in coordinate" content
                :key="item.no"
                :position="{lng: item.longitude, lat: item.latitude}"
                :labelStyle="labelStyle"
                :offset="{'width':-16,'height':-37}"
                @click="openInfo(item)"
                :title="item.name"/>
      <bm-info-window :position="{lng: infoWindow.longirude, lat: infoWindow.latitude}" :show="show"
                      @close="infoWindowClose" @open="infoWindowOpen" :width="width">
        <p style="margin:0 0 5px 0;padding: 0;font-size: 16px"><strong>{{this.infoWindow.title}}</strong></p>
        <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">收费员工号：{{this.infoWindow.no}}</p>
        <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">所属单位：{{this.infoWindow.dw}}</p>
        <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">定位时间：{{this.infoWindow.positionTime}}</p>
        <p style="margin:0 0 5px 0;padding: 0;font-size: 14px">联系方式：{{this.infoWindow.telNum}}</p>
      </bm-info-window>
    </baidu-map>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        width: 280,
        show: false,
        infoWindow: {
          longirude: 0,
          latitude: 0,
          title: '',
          no: '',
          dw: '',
          telNum: '',
          positionTime: ''
        },
        labelStyle: {
          backgroundColor: 'transparent',
          color: '#fff',
          border: '0px',
          fontSize: '14px',
          fontWeight: '300',
          width: '28px',
          height: '37px',
          textAlign: 'center',
          lineHeight: '33px',
          background: 'url(../src/assets/map_images/markersidle.png) no-repeat'
        },
        coordinate: [
          {
            longitude: '117.032724',
            latitude: '36.680484',
            name: '泰华七号管理员',
            no: '1528',
            dw: '泰华停车运营公司',
            positionTime: new Date(),
            telNum: '17862837487'
          }
        ]
      }
    },
    methods: {
      openInfo(val) {
        console.log(val)
        this.infoWindow.longirude = val.longitude
        this.infoWindow.latitude = val.latitude
        this.infoWindow.title = val.name
        this.infoWindow.no = val.no
        this.infoWindow.dw = val.dw
        this.infoWindow.telNum = val.telNum
        this.infoWindow.positionTime = val.positionTime
        this.show = true
      },
      infoWindowClose(e) {
        this.show = false
      },
      infoWindowOpen(e) {
        this.show = true
      }
    }
  }
</script>
<style scoped>
  .container {
    position: relative;
    padding: 20px;
    width: 100%;
    height: 85vh;
  }
  .box {
    width: 100%;
    height: 100%;
  }
</style>
